<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    background: #fff;
}
header{
    width: 100%;
    height: 40px;
    background: #DF3031;
    padding: 10px 0;
}
header img{
    height: 100%;
    display: block;
    margin: 0 auto;
}
footer{
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fafafa;
    padding: 0;
    margin:0;
}
footer ul{
    width: 100%;
    height:50px;
}
footer ul li{
    width: 20%;
    height: 50px;
    float: left;
    color: #333;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    list-style: none;
    display: block;
}
footer ul li.choise{
    color: #DF3031;
}
</style>
</head>
<body>
<!-- 顶部logo区域 -->
<header>
    <img src="../image/logo.png" >
</header>
<script>
apiready = function(){
// 导航栏区域
    nav();
// frame群组区域
    fgroup();
}

// 导航栏函数
function nav(){
navigationBar = api.require('navigationBar');
navigationBar.open({
    y: 58,
    w: api.frameWidth,
    h: 42,
    selectedIndex:0,
    itemSize : {
        w : 60
    },
    items: [{
        title: '头条',
        bg: '#fafafa',
    },{
        title: '娱乐',
        bg: '#fafafa',
    },{
        title: '热点',
        bg: '#fafafa',
    },{
        title: '体育',
        bg: '#fafafa',
    },{
        title: 'IT',
        bg: '#fafafa',
    },{
        title: '网易号',
        bg: '#fafafa',
    },{
        title: '财经',
        bg: '#fafafa',
    },{
        title: '科技',
        bg: '#fafafa',
    }],
    font: {
        size:14,
        sizeSelected:17,
        color: '#333',
        colorSelected:'#DF3031'
    },
    fixedOn: api.frameName
}, function(ret, err){
    // 让frame跟随导航栏滑动
    api.setFrameGroupIndex({
    name: 'group1',
    index: ret.index,
    scroll: true
    })


    // if( ret ){
    //     // alert( JSON.stringify( ret ) );
    // }else{
    //     // alert( JSON.stringify( err ) );
    // }
});
}

// frame群组函数
function fgroup(){
    var c = 1;
    api.openFrameGroup ({
    name: 'group1',
    background: '#fff',
    scrollEnabled: true,
    rect: {
         x: 0, 
         y: 100,
         w: api.winWidth,
         h: api.winHeight-150
    },
    index: 0,
    frames: [{
        name: 'frame1', 
        url: 'frame/frame1.html',
        bgColor: '#fff'
    },{
        name: 'frame2', 
        url: 'frame/frame2.html', 
        bgColor: '#fff'
    },{
        name: 'frame3', 
        url: 'frame/frame3.html', 
        bgColor: '#fff'
    },{
        name: 'frame4', 
        url: 'frame/frame4.html', 
        bgColor: '#fff'
    },{
        name: 'frame5', 
        url: 'frame/frame5.html', 
        bgColor: '#fff'
    },{
        name: 'frame6', 
        url: 'frame/frame6.html', 
        bgColor: '#fff'
    },{
        name: 'frame7', 
        url: 'frame/frame7.html', 
        bgColor: '#fff'
    },{
        name: 'frame8', 
        url: 'frame/frame8.html', 
        bgColor: '#fff'
    }]
}, function(ret, err){
    if(c==1){
        c=2;
        setTimeout(function(){
            c=1;
        },500)
         // 改变导航条的参数
        navigationBar.config({
        key: 'selectedIndex',
        value: ret.index
        })
    }
   

//     if( ret ){
//          alert( JSON.stringify( ret ) );
//     }else{
//          alert( JSON.stringify( err ) );
//     }
});
}

</script>

<footer>
    <ul>
        <li class="choise">新闻</li>
        <li>阅读</li>
        <li>视频</li>
        <li>话题</li>
        <li>我</li>
    </ul>
</footer>
</body>
</html>